<template>
  <div
    style="display: flex; flex-direction: column; align-items: center; flex: 1"
    class="animate__animated animate__fadeInLeft"
  >
    <h3 class="place-holder secondary-text">修改个人信息</h3>
    <el-form ref="form">
      <el-form-item>
        <el-input
          placeholder="请输入昵称"
          :clearable="true"
          v-model="form.nickname"
        >
          <i slot="prefix" class="icon-slot el-icon-user warning-color"></i>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          placeholder="请输入邮箱"
          :clearable="true"
          v-model="form.email"
        >
          <i slot="prefix" class="icon-slot el-icon-message danger-color"></i>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          placeholder="请输入手机号"
          :clearable="true"
          v-model="form.phone"
        >
          <i
            slot="prefix"
            class="icon-slot el-icon-mobile-phone primary-color"
          ></i>
        </el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "UserInfoEdit",
  props: {
    nickname: String,
    username: String,
    email: String,
    phone: String,
    id: {
      require: true,
      type: Number,
    },
  },
  data() {
    return {
      form: {
        id: this.id,
        nickname: this.nickname,
        username: this.username,
        email: this.email,
        phone: this.phone,
      },
    };
  },
  methods: {
    ...mapActions("user", ["editUser"]),
    save() {
      this.editUser(this.form);
    },
  },
  computed: {},
  watch: {
    nickname(val) {
      this.form.nickname = val;
    },
    username(val) {
      this.form.username = val;
    },
    email(val) {
      this.form.email = val;
    },
    phone(val) {
      this.form.phone = val;
    },
  },
};
</script>
